<template>
    <div>
        <!-- 数据列表 -->
        <div class="box">

        <div class="list">
            <div>
                <img class="list-img" src="../../../assets/images/查询数据列表.png" alt="">
            </div>
            <div>
                数据列表
            </div>
        </div>
        <!-- 表格 -->
        <el-table border :data="tableData"
            style="width: 100%" align="center">
            <el-table-column prop="accountId" label="账户ID" align="center"></el-table-column>
            <el-table-column prop="accountName" label="账户名" align="center"></el-table-column>
            <el-table-column prop="ipAddress" label="IP" align="center"></el-table-column>
            <el-table-column prop="createTime" label="登录时间" align="center"></el-table-column>
            <el-table-column prop="updateTime" label="修改时间" align="center"></el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" background
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>

    
    </div>

</template>
 
<script>
import { loginRecordPage } from '@/api/index'
export default {
    data() {
        return {
            tableData: [], //分页数据
            currentPage: 1, // 当前页码
            total: 0, // 总条数
            pageSize: 10// 每页的数据条数

        };
    },
    created() {
        this.loginRecordPage(this.pageSize, this.currentPage)
    },
    methods: {
        // 登录日志分页
        async loginRecordPage(limit, page) {
            let data = {
                limit,
                page
            }
            let result = await loginRecordPage(data)
            if (result.code == 0) {
                this.tableData = result.data.records
                this.pageSize = result.data.limit
                this.total = result.data.total
            }
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.loginRecordPage(this.pageSize, this.currentPage)
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.loginRecordPage(this.pageSize, this.currentPage)
        }
    }
};
</script>

<style lang="scss" scoped>

.box{
    border: 1px solid #ccc;
    width: 98%;
    margin:10px auto ;
}
.list {
    display: flex;
    align-items: center;
    padding-left: 20px;
    height: 50px;
    background-color: #f3f3f3;
    color: #666;

    .list-img {
        width: 20px;
        height: 20px;
    }
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1abc9c !important;
    color: #FFF;
}
</style>